/** @jsx jsx */;
import {keyframes,ClassNames, css, jsx } from '@emotion/react'
import classNames from 'classnames';
import {useFloating} from '@floating-ui/react-dom-interactions';
import React, { useState } from 'react';
const css_global=css`
  #tooltip {
        background: #222;
        color: white;
        font-weight: bold;
        padding: 5px;
        border-radius: 4px;
        font-size: 90%;
        pointer-events: none;
}`
export default function App() {
  // const [open, setOpen] = useState(true);
  // const {x, y, reference, floating, strategy} = useFloating({
  //   open,
  //   onOpenChange: setOpen,
  // });
 
  return (
    <div css={css_global}>
      <button id="button" aria-describedby="tooltip">
        My button
      </button>
      <div id="tooltip" role="tooltip">My tooltip</div>
    </div>
  );
}